<template>
  <div class="business-analysis">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>预约转化率对比</span>
              <el-button type="primary" size="small" @click="refreshData">刷新数据</el-button>
            </div>
          </template>
          <div ref="conversionFunnel" class="chart-container funnel-chart"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>技师产能利用率排行榜</span>
              <el-button type="primary" size="small" @click="refreshData">刷新数据</el-button>
            </div>
          </template>
          <div ref="utilizationRanking" class="chart-container ranking-chart"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>门店营收趋势</span>
              <el-button type="primary" size="small" @click="refreshData">刷新数据</el-button>
            </div>
          </template>
          <div ref="revenueTrend" class="chart-container trend-chart"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>服务项目营收分布</span>
              <el-button type="primary" size="small" @click="refreshData">刷新数据</el-button>
            </div>
          </template>
          <div ref="serviceDistribution" class="chart-container distribution-chart"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import * as echarts from 'echarts'
import { ElMessage } from 'element-plus'
import { BusinessAnalysisConfig } from './BusinessAnalysis/config.js'
import './BusinessAnalysis/style.css'

// 图表引用
const conversionFunnel = ref(null)
const utilizationRanking = ref(null)
const revenueTrend = ref(null)
const serviceDistribution = ref(null)

// 配置
const config = BusinessAnalysisConfig

// 初始化预约转化漏斗
const initConversionFunnel = () => {
  console.log('初始化转化漏斗图表，ref:', conversionFunnel.value)
  if (!conversionFunnel.value) {
    console.error('转化漏斗图表容器未找到')
    return
  }

  // 强制设置容器尺寸
  conversionFunnel.value.style.height = '450px'
  conversionFunnel.value.style.width = '100%'
  conversionFunnel.value.style.minHeight = '450px'
  conversionFunnel.value.style.display = 'block'
  conversionFunnel.value.style.visibility = 'visible'

  const chart = echarts.init(conversionFunnel.value)
  const option = {
    title: {
      text: '预约转化漏斗分析',
      left: 'center',
      textStyle: {
        fontSize: 16,
        fontWeight: 'bold',
        color: '#303133'
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    series: [
      {
        name: '转化漏斗',
        type: 'funnel',
        left: '15%',
        top: 60,
        width: '70%',
        height: '75%',
        gap: 2,
        sort: 'descending',
        label: {
          show: true,
          position: 'inside',
          fontSize: 12,
          color: '#fff'
        },
        labelLine: {
          length: 10,
          lineStyle: {
            width: 1,
            type: 'solid'
          }
        },
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 1
        },
        emphasis: {
          label: {
            fontSize: 14
          }
        },
        data: [
          { value: 1000, name: '浏览服务', itemStyle: { color: '#5470c6' } },
          { value: 800, name: '选择服务', itemStyle: { color: '#91cc75' } },
          { value: 600, name: '选择技师', itemStyle: { color: '#fac858' } },
          { value: 400, name: '确认预约', itemStyle: { color: '#ee6666' } },
          { value: 200, name: '支付', itemStyle: { color: '#73c0de' } }
        ]
      }
    ]
  }

  console.log('设置转化漏斗图表选项:', option)
  chart.setOption(option)

  // 强制重新渲染
  setTimeout(() => {
    chart.resize()
    console.log('转化漏斗图表已重新调整大小')
  }, 100)

  // 监听窗口大小变化
  window.addEventListener('resize', () => {
    chart.resize()
  })
}

// 初始化技师产能利用率排行榜
const initUtilizationRanking = () => {
  if (!utilizationRanking.value) return

  const chart = echarts.init(utilizationRanking.value)
  const option = {
    title: {
      text: '技师产能利用率TOP10',
      left: 'center',
      textStyle: {
        fontSize: 16,
        fontWeight: 'bold',
        color: '#303133'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' }
    },
    grid: {
      left: '10%',
      right: '10%',
      bottom: '15%',
      top: '20%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      max: 100,
      axisLabel: {
        formatter: '{value}%',
        fontSize: 11
      }
    },
    yAxis: {
      type: 'category',
      data: ['技师1号', '技师2号', '技师3号', '技师4号', '技师5号', '技师6号', '技师7号', '技师8号', '技师9号', '技师10号'],
      axisLabel: { fontSize: 11 }
    },
    series: [
      {
        name: '利用率',
        type: 'bar',
        data: [95, 88, 82, 78, 75, 72, 68, 65, 62, 58],
        itemStyle: {
          color: function (params) {
            const colors = ['#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', '#5470c6', '#91cc75']
            return colors[params.dataIndex]
          }
        },
        barWidth: '50%',
        label: {
          show: true,
          position: 'right',
          formatter: '{c}%',
          fontSize: 11,
          distance: 5
        }
      }
    ]
  }
  chart.setOption(option)

  // 监听窗口大小变化
  window.addEventListener('resize', () => {
    chart.resize()
  })
}

// 初始化营收趋势图
const initRevenueTrend = () => {
  if (!revenueTrend.value) return

  const chart = echarts.init(revenueTrend.value)
  const option = {
    title: {
      text: '门店营收趋势',
      left: 'center',
      textStyle: {
        fontSize: 16,
        fontWeight: 'bold',
        color: '#303133'
      }
    },
    tooltip: { trigger: 'axis' },
    legend: {
      data: ['总店', '分店A', '分店B', '分店C'],
      bottom: 5,
      textStyle: { fontSize: 12 }
    },
    grid: {
      left: '10%',
      right: '10%',
      bottom: '20%',
      top: '20%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      axisLabel: {
        fontSize: 11,
        margin: 10,
        interval: 0
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '¥{value}k',
        fontSize: 11
      }
    },
    series: [
      {
        name: '总店',
        type: 'line',
        data: [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330],
        smooth: true,
        lineStyle: { width: 2 },
        symbolSize: 6,
        itemStyle: { color: '#5470c6' }
      },
      {
        name: '分店A',
        type: 'line',
        data: [220, 182, 191, 234, 290, 330, 310, 201, 154, 190, 330, 410],
        smooth: true,
        lineStyle: { width: 2 },
        symbolSize: 6,
        itemStyle: { color: '#91cc75' }
      },
      {
        name: '分店B',
        type: 'line',
        data: [150, 232, 201, 154, 190, 330, 410, 320, 332, 301, 334, 390],
        smooth: true,
        lineStyle: { width: 2 },
        symbolSize: 6,
        itemStyle: { color: '#fac858' }
      },
      {
        name: '分店C',
        type: 'line',
        data: [320, 332, 301, 334, 390, 330, 320, 332, 301, 334, 390, 420],
        smooth: true,
        lineStyle: { width: 2 },
        symbolSize: 6,
        itemStyle: { color: '#ee6666' }
      }
    ]
  }
  chart.setOption(option)

  // 监听窗口大小变化
  window.addEventListener('resize', () => {
    chart.resize()
  })
}

// 初始化服务项目分布图
const initServiceDistribution = () => {
  if (!serviceDistribution.value) return

  const chart = echarts.init(serviceDistribution.value)
  const option = {
    title: {
      text: '服务项目营收分布',
      left: 'center',
      textStyle: {
        fontSize: 16,
        fontWeight: 'bold',
        color: '#303133'
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: '5%',
      top: 'middle',
      data: ['面部护理', '身体按摩', '足疗', 'SPA', '美甲', '美发'],
      textStyle: { fontSize: 12 }
    },
    series: [
      {
        name: '营收占比',
        type: 'pie',
        radius: ['30%', '60%'],
        center: ['60%', '50%'],
        avoidLabelOverlap: false,
        label: { show: false, position: 'center' },
        emphasis: {
          label: {
            show: true,
            fontSize: 18,
            fontWeight: 'bold'
          }
        },
        labelLine: { show: false },
        data: [
          { value: 1048, name: '面部护理', itemStyle: { color: '#5470c6' } },
          { value: 735, name: '身体按摩', itemStyle: { color: '#91cc75' } },
          { value: 580, name: '足疗', itemStyle: { color: '#fac858' } },
          { value: 484, name: 'SPA', itemStyle: { color: '#ee6666' } },
          { value: 300, name: '美甲', itemStyle: { color: '#73c0de' } },
          { value: 200, name: '美发', itemStyle: { color: '#3ba272' } }
        ]
      }
    ]
  }
  chart.setOption(option)

  // 监听窗口大小变化
  window.addEventListener('resize', () => {
    chart.resize()
  })
}

// 刷新数据
const refreshData = () => {
  ElMessage.success('数据已刷新')
  // 这里可以添加实际的数据刷新逻辑
}

// 组件挂载时初始化图表
onMounted(() => {
  nextTick(() => {
    initConversionFunnel()
    initUtilizationRanking()
    initRevenueTrend()
    initServiceDistribution()
  })
})
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>